<template>
  <div class="home-cell" >
    <div :style="{height: toolbarHei+'px'}"></div>
    <div style="height: calc(100vh - 75px);">
      <kc v-if="comp==='kc'" />
      <work v-if="comp === 'work'" />
      <cartPage ref="cartPageRef" v-if="comp === 'cartPage'" @del="del" />
      <setting v-if="comp === 'setting'" />
    </div>
    <nut-tabbar v-model="active" @tab-switch="changeTab"  bottom safe-area-inset-bottom placeholder>
      <nut-tabbar-item tab-title="库存">
        <template #icon>
          <Home></Home>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="工作台">
        <template #icon>
          <Category></Category>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="购物车">
        <template #icon>
          <Cart></Cart>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="设置">
        <template #icon>
          <Setting></Setting>
        </template>
      </nut-tabbar-item>
    </nut-tabbar>

  </div>
</template>
<script setup>
import tool from "@/utils/tool.js";
import work from "@/views/tabs/work.vue";
import kc from '@/views/tabs/kc.vue'
import cartPage from '@/views/tabs/cart.vue'
import setting from "@/views/tabs/setting.vue";
import { Home, Category, Cart, Setting } from '@nutui/icons-vue'
import pinia from "@/stores/index.js";
const global = useGlobal(pinia)
import bus from "@/utils/bus.js";
import {useGlobal} from "@/stores/useGlobal.js";
import {ref, onActivated, computed, onMounted} from "vue";
const active = ref(1)
const title = ref('')
const goodSearchVal = ref('')
const focus = ref(false)
const badge = ref('')
const comp = ref('work')
const user = ref({})

const changeTab = () => {
  let val = active.value
  if(val === 0) {
    title.value = '库存'
    comp.value = 'kc'
  }
  if(val === 1) {
    title.value = '工作台'
    comp.value = 'work'
  }

  if(val === 2) {
    title.value = '购物车'
    comp.value = 'cartPage'
  }

  if(val === 3) {
    title.value = '设置'
    comp.value = 'setting'
  }
  document.title = title.value
}
onActivated(() => {
  setBadge()
})
const setBadge = () => {
  tool.post('app/getCartNum').then(ret => {
    badge.value = ret.data?ret.data:''
  })
}
const del = () => {
  setBadge()
}
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
onMounted(() => {
  user.value = tool.data.getUser()
  tool.post('app/getGoodCat',).then(ret => {
    let cat = []
    ret.data.map(row => {
      cat.push({
        label: row.name,
        value: row.id
      })
    })
    global.goodCats = cat
  })
  bus.$on('changeCart', () => {
    setBadge()
  })
})



</script>

<style scoped lang="scss">
.home-cell {
  .el-card__header {
    border-bottom: none;
  }
  .el-card__body {
    padding: 0 10px 10px 10px;
  }
}

.item-title {
  margin-top: 5px;
  font-size: 13px;
  color: #606266;
}
</style>
